<h1>Text field</h1>
<h4>Default</h4>
<FluentTextField></FluentTextField>
<FluentTextField>Label</FluentTextField>

<h4>Full Width</h4>
<FluentTextField style="width: 100%;"></FluentTextField>

<h4>Placeholder</h4>
<FluentTextField Placeholder="Placeholder"></FluentTextField>

<!-- Required -->
<h4>Required</h4>
<FluentTextField Required="true"></FluentTextField>

<!-- Disabled -->
<h4>Disabled</h4>
<FluentTextField Disabled="true"></FluentTextField>
<FluentTextField Disabled="true">label</FluentTextField>
<FluentTextField Disabled="true" Placeholder="placeholder"></FluentTextField>

<!-- Read only -->
<h4>Read only</h4>
<FluentTextField Readonly="true" Value="Readonly"></FluentTextField>
<FluentTextField Readonly="true" Value="Readonly">label</FluentTextField>

<!-- Read only -->
<h4>Autofocus</h4>
<FluentTextField Autofocus="true">autofocus</FluentTextField>

<!-- Start -->
<h4>With start</h4>
<FluentTextField>
    <svg slot="start" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
        <path d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z" />
    </svg>
</FluentTextField>

<!-- End -->
<h4>With end</h4>
<FluentTextField>
    <svg slot="end" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
        <path d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z" />
    </svg>
</FluentTextField>

<h4>Filled</h4>
<h5>Default</h5>
<FluentTextField Appearance="Appearance.Filled"></FluentTextField>
<FluentTextField Appearance="Appearance.Filled">label</FluentTextField>

<h5>Placeholder</h5>
<FluentTextField Appearance="Appearance.Filled" Placeholder="Placeholder"></FluentTextField>

<!-- Required -->
<h5>Required</h5>
<FluentTextField Appearance="Appearance.Filled" Required="true"></FluentTextField>

<!-- Disabled -->
<h5>Disabled</h5>
<FluentTextField Appearance="Appearance.Filled" Disabled="true"></FluentTextField>
<FluentTextField Appearance="Appearance.Filled" Disabled="true">label</FluentTextField>
<FluentTextField Appearance="Appearance.Filled" Disabled="true" Placeholder="placeholder"></FluentTextField>

<!-- Read only -->
<h5>Read only</h5>
<FluentTextField Appearance="Appearance.Filled" Readonly="true" Value="Readonly"></FluentTextField>
<FluentTextField Appearance="Appearance.Filled" Readonly="true" Value="Readonly">label</FluentTextField>

<!-- With label -->
<h4>Visual vs audio label</h4>
<FluentTextField>
    <span aria-label="Audio label">Visible label</span>
</FluentTextField>

<!-- With hidden label -->
<h4>Audio label only</h4>
<FluentTextField>
    <span aria-label="Audio label only"></span>
</FluentTextField>

<!-- With aria-label -->
<h4>With aria-label</h4>
<FluentTextField aria-label="Text field with aria-label"></FluentTextField>

<h4>Password</h4>
<FluentTextField TextFieldType="TextFieldType.Password">Password</FluentTextField>

<h4>Email (with spellcheck)</h4>
<FluentTextField TextFieldType="TextFieldType.Email" Spellcheck="true">Email (with spellcheck)</FluentTextField>

<h4>Telephone number</h4>
<FluentTextField TextFieldType="TextFieldType.Tel">Telephone</FluentTextField>

<h4>Url</h4>
<FluentTextField TextFieldType="TextFieldType.Url">Url</FluentTextField>

<h4>Minlength</h4>
<FluentTextField MinLength="4">Minlength</FluentTextField>

<h4>Maxlength</h4>
<FluentTextField MaxLength="4">Maxlength</FluentTextField>